{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .mui-table h4 ,.mui-media-body h4{
        line-height: 21px;
        font-weight: 400;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>
<div class="mui-content">
    <form method="post" class="form-recharge">
    
        <div class="mui-card">
            <ul class="mui-table-view ">
        <li class="mui-table-view-divider">充值对象</li>
        <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <div class="mui-media-body">
                                       玩家:{{nickname}}
                <p class='mui-ellipsis'>ID:{{uid}}</p>
            </div>
        </a>
       </li>
                <li class="mui-table-view-divider">充值数量</li>
                <div class="mui-input-row padding-10">
                    <input type="number" pattern="\d*" placeholder="输入充值数量" name="recharge_amount" min="1">
                </div>
                
                <li class="mui-table-view-divider">充值类型</li>
                <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon">
                    <input name="payment" type="radio"  value="card" >
                    <div class="mui-media-object mui-pull-left">
                    </div>
                    <div class="mui-media-body">
                                                                         房卡
                        <span class="mui-badge mui-badge-danger ">
                          您账户剩余:{%if userInfo.card_count %}{{userInfo.card_count}}{%else%}0{%endif%}张
                          </span>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon">
                    <input name="payment" type="radio"  value="coin">
                    <div class="mui-media-object mui-pull-left">
                    </div>
                    <div class="mui-media-body">
                                                                   金币
                      <span class="mui-badge mui-badge-danger ">
                          您账户剩余:{%if userInfo.card_count %}{{userInfo.coin_count}}{%else%}0{%endif%}枚
                          </span>
                    </div>
                </li>
                
            </ul>
         </div>
        <div class="mui-content-padded" style="margin-top: 20px; margin-bottom: 50px">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="recharge">提交</button>
        </div>
    </form>
</div>

{% endblock%}

{% block script %}
<script>
    var falg = false;
    $("#recharge").on("tap",function () {
    	var that = this;
    	var player_id = "{{uid}}";
        var card_count = "{{userInfo.card_count}}";
        var coin_count = "{{userInfo.coin_count}}";
        var recharge_amount = $("input[name='recharge_amount']").val();
        var payment = $("input[name='payment']:checked").val();
        
        if(recharge_amount===''){
            mui.toast("请输入充值数量");
            return;
        }
        if(recharge_amount===0){
            mui.toast("充值数量必须大于0");
            return;
        }
        if(payment===undefined){
            mui.toast("请选择一种充值类型");
            return;
        }
        if(payment=='card'){
        	if(Number(recharge_amount)>Number(card_count)){
        		mui.toast("充值数量大于房卡剩余数量");
                return;
        	}
        }
        if(payment=='coin'){
        	if(Number(recharge_amount)>Number(coin_count)){
        		mui.toast("充值数量大于金币剩余数量");
                return;
        	}
        }
        
        var btnArray = ['否', '是'];
        mui.confirm('是否确认充值？', '', btnArray, function(e) {
            if (e.index == 1) {
                //获取id
            	if(falg){
                    return false;
                }
                
                $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
                falg = true;
                
                mui.post("/center/player/recharge",{recharge_amount:recharge_amount,payment:payment,player_id:player_id},
                		function(data){
                	if(data.errno == 0){
                        mui.toast(data.data.name);
                        setTimeout(function(){
                            $(that).removeClass('disabled').prop('disabled',false);
                            falg=false;
                            location.href="/center/player/?proxy_id={{proxy_id}}";
                        },1500);
                    }else {
                    	$(that).removeClass('disabled').prop('disabled',false);
                        if(data.errno==1001){
                            $.each(data.errmsg,function(i,n){
                                mui.toast(n);
                            })
                        }else {
                            mui.toast(data.errmsg);

                        }
                    }
                },'json');
            }
        })
        return false;
        
        
    })
</script>
{% endblock %}
